<!DOCTYPE html>
<!-- saved from url=(0012)about:srcdoc -->
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>CodePen - Horizontal parallax sliding slider with Swiper.js</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="node_modules/swiper/swiper-bundle.min.css">
  <style>
    [class^="swiper-button-"] {
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
    }

    .swiper-slide {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    *, *:before, *:after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 80%;
      height: 100vh;
      float: left;
      -webkit-transition: opacity .6s ease, -webkit-transform .3s ease;
      transition: opacity .6s ease, -webkit-transform .3s ease;
      transition: opacity .6s ease, transform .3s ease;
      transition: opacity .6s ease, transform .3s ease, -webkit-transform .3s ease;
    }
    .swiper-container.nav-slider {
      width: 20%;
      padding-left: 5px;
    }
    .swiper-container.nav-slider .swiper-slide {
      cursor: pointer;
      opacity: .4;
      -webkit-transition: opacity .3s ease;
      transition: opacity .3s ease;
    }
    .swiper-container.nav-slider .swiper-slide.swiper-slide-active {
      opacity: 1;
    }
    .swiper-container.nav-slider .swiper-slide .content {
      width: 100%;
    }
    .swiper-container.nav-slider .swiper-slide .content .title {
      font-size: 20px;
    }
    .swiper-container:hover .swiper-button-prev,
    .swiper-container:hover .swiper-button-next {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
    }
    .swiper-container.loading {
      opacity: 0;
      visibility: hidden;
    }

    .swiper-slide {
      overflow: hidden;
    }
    .swiper-slide .slide-bgimg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-position: center;
      background-size: cover;
    }
    .swiper-slide .entity-img {
      display: none;
    }
    .swiper-slide .content {
      position: absolute;
      top: 40%;
      left: 0;
      width: 50%;
      padding-left: 5%;
      color: #fff;
    }
    .swiper-slide .content .title {
      font-size: 2.6em;
      font-weight: bold;
      margin-bottom: 30px;
    }
    .swiper-slide .content .caption {
      display: block;
      font-size: 13px;
      line-height: 1.4;
      -webkit-transform: translateX(50px);
      transform: translateX(50px);
      opacity: 0;
      -webkit-transition: opacity .3s ease, -webkit-transform .7s ease;
      transition: opacity .3s ease, -webkit-transform .7s ease;
      transition: opacity .3s ease, transform .7s ease;
      transition: opacity .3s ease, transform .7s ease, -webkit-transform .7s ease;
    }
    .swiper-slide .content .caption.show {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }

    [class^="swiper-button-"] {
      width: 44px;
      opacity: 0;
      visibility: hidden;
    }

    .swiper-button-prev {
      -webkit-transform: translateX(50px);
      transform: translateX(50px);
    }

    .swiper-button-next {
      -webkit-transform: translateX(-50px);
      transform: translateX(-50px);
    }
  </style>

  <script>
  window.console = window.console || function (t) {}
  </script>


  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage('resize', '*')
  }
  </script>


</head>

<body translate="no">
<div class="swiper-container main-slider swiper-container-horizontal" style="cursor: grab;">
  <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-934px, 0px, 0px);">
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E'); transform: translateX(467px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Shaun Matthews</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="1"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg'); transform: translateX(233.5px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Alexis Berry</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate swiper-slide-active" data-swiper-slide-index="2"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s'); transform: translateX(-1.13687e-13px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Billie Pierce</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate swiper-slide-next" data-swiper-slide-index="3"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk'); transform: translateX(-233.5px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Trevor Copeland</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="4"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM'); transform: translateX(-467px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Bernadette Newman</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide" data-swiper-slide-index="0" style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E'); transform: translateX(-700.5px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Shaun Matthews</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="1"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg'); transform: translateX(-934px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Alexis Berry</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate-active" data-swiper-slide-index="2"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s'); transform: translateX(-1167.5px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Billie Pierce</p>
        <span class="caption show">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate-next" data-swiper-slide-index="3"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk'); transform: translateX(-1401px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Trevor Copeland</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide" data-swiper-slide-index="4" style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM'); transform: translateX(-1634.5px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Bernadette Newman</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E'); transform: translateX(-1868px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Shaun Matthews</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="1"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg'); transform: translateX(-2101.5px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Alexis Berry</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s'); transform: translateX(-2335px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Billie Pierce</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk'); transform: translateX(-2568.5px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Trevor Copeland</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="4"
         style="width: 467px; transition: all 0ms ease 0s;">
      <figure class="slide-bgimg"
              style="background-image: url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM'); transform: translateX(-2802px); transition: all 0ms ease 0s;">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Bernadette Newman</p>
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
      </div>
    </div>
  </div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
</div>

<!-- Thumbnail navigation -->
<div class="swiper-container nav-slider swiper-container-vertical">
  <div class="swiper-wrapper" role="navigation"
       style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Shaun Matthews</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="1"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Alexis Berry</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate swiper-slide-active" data-swiper-slide-index="2"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Billie Pierce</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate swiper-slide-next" data-swiper-slide-index="3"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Trevor Copeland</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="4"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Bernadette Newman</p>
      </div>
    </div>
    <div class="swiper-slide" data-swiper-slide-index="0" style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Shaun Matthews</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="1"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Alexis Berry</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate-active" data-swiper-slide-index="2"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Billie Pierce</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate-next" data-swiper-slide-index="3"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Trevor Copeland</p>
      </div>
    </div>
    <div class="swiper-slide" data-swiper-slide-index="4" style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Bernadette Newman</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Shaun Matthews</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="1"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Alexis Berry</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Billie Pierce</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Trevor Copeland</p>
      </div>
    </div>
    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="4"
         style="height: 239.6px; margin-bottom: 5px;">
      <figure class="slide-bgimg"
              style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM)">
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img">
      </figure>
      <div class="content">
        <p class="title">Bernadette Newman</p>
      </div>
    </div>
  </div>
</div>
<script
    src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>


<script id="rendered-js">
// Params
let mainSliderSelector = '.main-slider',
    navSliderSelector  = '.nav-slider',
    interleaveOffset   = 0.5

// Main Slider
let mainSliderOptions = {
  loop: true,
  speed: 1000,
  autoplay: {
    delay: 3000
  },

  loopAdditionalSlides: 10,
  grabCursor: true,
  watchSlidesProgress: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },

  on: {
    init: function () {
      this.autoplay.stop()
    },
    imagesReady: function () {
      this.el.classList.remove('loading')
      this.autoplay.start()
    },
    slideChangeTransitionEnd: function () {
      let swiper   = this,
          captions = swiper.el.querySelectorAll('.caption')
      for (let i = 0; i < captions.length; ++i) {
        if (window.CP.shouldStopExecution(0)) break
        captions[i].classList.remove('show')
      }
      window.CP.exitedLoop(0)
      swiper.slides[swiper.activeIndex].querySelector('.caption').classList.add('show')
    },
    progress: function () {
      let swiper = this
      for (let i = 0; i < swiper.slides.length; i++) {
        if (window.CP.shouldStopExecution(1)) break
        let slideProgress  = swiper.slides[i].progress,
            innerOffset    = swiper.width * interleaveOffset,
            innerTranslate = slideProgress * innerOffset

        swiper.slides[i].querySelector('.slide-bgimg').style.transform =
          'translateX(' + innerTranslate + 'px)'
      }
      window.CP.exitedLoop(1)
    },
    touchStart: function () {
      let swiper = this
      for (let i = 0; i < swiper.slides.length; i++) {
        if (window.CP.shouldStopExecution(2)) break
        swiper.slides[i].style.transition = ''
      }
      window.CP.exitedLoop(2)
    },
    setTransition: function (speed) {
      let swiper = this
      for (let i = 0; i < swiper.slides.length; i++) {
        if (window.CP.shouldStopExecution(3)) break
        swiper.slides[i].style.transition = speed + 'ms'
        swiper.slides[i].querySelector('.slide-bgimg').style.transition =
          speed + 'ms'
      }
      window.CP.exitedLoop(3)
    }
  }
}

let mainSlider = new Swiper(mainSliderSelector, mainSliderOptions)

// Navigation Slider
let navSliderOptions = {
  loop: true,
  loopAdditionalSlides: 10,
  speed: 1000,
  spaceBetween: 5,
  slidesPerView: 5,
  centeredSlides: true,
  touchRatio: 0.2,
  slideToClickedSlide: true,
  direction: 'vertical',
  on: {
    imagesReady: function () {
      this.el.classList.remove('loading')
    },
    click: function () {
      mainSlider.autoplay.stop()
    }
  }
}

let navSlider = new Swiper(navSliderSelector, navSliderOptions)

mainSlider.controller.control = navSlider
navSlider.controller.control = mainSlider
</script>
</body>
</html>
